<template>
  <!-- 队列管理-队列列表-页面 -->
  <section class="page">
    <data-form :model="queryModel" @onSearch="refreshData" :page="pageService" :rules="rules">
      <template slot="inputs">
        <el-form-item label="队列名称" prop="queueName">
          <el-input v-model.trim="queryModel.queueName" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="队列代码" prop="queueCode">
          <el-input v-model.trim="queryModel.queueCode" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="队列状态" prop="status">
          <el-select v-model.trim="queryModel.status" size="small">
            <el-option
              v-for="{ index, name, code } in $dict.getDictData('CommonState')"
              :key="index"
              :label="name"
              :value="code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="转手标识"
          prop="changeHandType"
          v-if="queueType !== 'ROBOT'"
        >
          <el-select v-model="queryModel.changeHandType" size="small">
            <el-option
              v-for="{ index, name, code } in $dict.getDictData(
                'ChangeHandType'
              )"
              :key="index"
              :label="name"
              :value="code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="修改人" prop="updateName">
          <el-input v-model.trim="queryModel.updateName" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="复核人员" prop="reviewer">
          <el-input v-model.trim="queryModel.reviewer" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item
          :label="queueType === 'OUTER' ? '外包公司代号' : '经办代号'"
          prop="agentName"
          v-if="queueType !== 'ROBOT'"
        >
          <el-input v-model.trim="queryModel.agentName" :maxlength="20"></el-input>
        </el-form-item>
      </template>
    </data-form>

    <data-box
      :data="queueDataSet"
      @onPageChange="refreshData"
      :page="pageService"
    >
      <template slot="buttons">
        <el-button @click="addQueue" v-if="queueType === 'SELF'" v-auth="23230">新增队列</el-button>
        <el-button @click="addQueue" v-if="queueType === 'OUTER'" v-auth="23240">新增队列</el-button>
        <el-button @click="addQueue" v-if="queueType === 'LAWSUIT'" v-auth="23260">新增队列</el-button>
        <el-button @click="addQueue" v-if="queueType === 'ROBOT'" v-auth="23250">新增队列</el-button>
      </template>
      <template slot="columns">
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showOrEditQueue(scope.row.id, true, false)" v-if="queueType === 'SELF'" v-auth="23231">查看</el-button>
            <el-button type="text" size="small" @click="showOrEditQueue(scope.row.id, true, false)" v-if="queueType === 'OUTER'" v-auth="23241">查看</el-button>
            <el-button type="text" size="small" @click="showOrEditQueue(scope.row.id, true, false)" v-if="queueType === 'LAWSUIT'" v-auth="23261">查看</el-button>
            <el-button type="text" size="small" @click="showOrEditQueue(scope.row.id, true, false)" v-if="queueType === 'ROBOT'" v-auth="23251">查看</el-button>
            <!-- 只有待审批 不展示编辑 -->
            <!-- v-if="!scope.row.queueStatus || ['REJECT', 'PASS'].includes(scope.row.queueStatus)" -->
            <el-button :disabled="['PENDING'].includes(scope.row.queueStatus)" type="text" size="small"  v-if="queueType === 'SELF'"   v-auth="23232" @click="showOrEditQueue(scope.row.id, false, true)">编辑</el-button>
            <el-button :disabled="['PENDING'].includes(scope.row.queueStatus)" type="text" size="small"  v-if="queueType === 'OUTER'"  v-auth="23242" @click="showOrEditQueue(scope.row.id, false, true)">编辑</el-button>
            <el-button :disabled="['PENDING'].includes(scope.row.queueStatus)" type="text" size="small"  v-if="queueType === 'LAWSUIT'" v-auth="23262" @click="showOrEditQueue(scope.row.id, false, true)">编辑</el-button>
            <el-button :disabled="['PENDING'].includes(scope.row.queueStatus)" type="text" size="small"  v-if="queueType === 'ROBOT'"   v-auth="23252" @click="showOrEditQueue(scope.row.id, false, true)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="queueCode"
          label="队列代码"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="queueName"
          label="队列名称"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="queueCategory"
          label="队列类型"
          :formatter="
            row => $filter.dictConvert(row.queueCategory, 'QueueCategory')
          "
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="status"
          label="队列状态"
          :formatter="row => $filter.dictConvert(row.status, 'CommonState')"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          v-if="queueType !== 'ROBOT'"
          prop="changeHandType"
          label="转手标识"
          :formatter="
            row => $filter.dictConvert(row.changeHandType, 'ChangeHandType')
          "
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          v-if="queueType !== 'ROBOT'"
          prop="balanceWay"
          label="金额种类"
          :formatter="row => $filter.dictConvert(row.balanceWay, 'BalanceWay')"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          v-if="queueType !== 'ROBOT'"
          prop="balanceDimension"
          label="分配维度"
          :formatter="
            row => $filter.dictConvert(row.balanceDimension, 'BalanceDimension')
          "
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          v-if="queueType !== 'ROBOT'"
          prop="distributionMode"
          label="分配模式"
          :formatter="
            row => $filter.dictConvert(row.distributionMode, 'DistributionMode')
          "
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="strategyName"
          label="分配日期策略"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="updateName"
          label="修改人"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="修改时间"
          :formatter="row => $filter.dateTimeFormat(row.updateTime)"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="reviewer"
          label="复核人员"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="reviewerDate"
          label="复核时间"
          :formatter="row => $filter.dateTimeFormat(row.reviewerDate)"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="reviewMsg"
          label="审批意见"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          v-if="queueType !== 'ROBOT'"
          :label="queueType !== 'OUTER' ? '经办设置' : '设置外包公司'"
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" v-if="queueType === 'SELF'"    @click="setAgent(scope.row)" v-auth="23233">设置</el-button>
            <el-button type="text" size="small" v-if="queueType === 'OUTER'"   @click="setAgent(scope.row)" v-auth="23243">设置</el-button>
            <el-button type="text" size="small" v-if="queueType === 'LAWSUIT'" @click="setAgent(scope.row)" v-auth="23263">设置</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="队列案件"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" v-if="queueType === 'SELF'"    @click="openPool(scope.row)" v-auth="23234">查看详情</el-button>
            <el-button type="text" size="small" v-if="queueType === 'OUTER'"   @click="openPool(scope.row)" v-auth="23244">查看详情</el-button>
            <el-button type="text" size="small" v-if="queueType === 'LAWSUIT'" @click="openPool(scope.row)" v-auth="23264">查看详情</el-button>
            <el-button type="text" size="small" v-if="queueType === 'ROBOT'"   @click="openPool(scope.row)" v-auth="23253">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="队列修改记录"
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" v-if="queueType === 'SELF'"    @click="openUpdateLog(scope.row)" v-auth="23235">查看</el-button>
            <el-button type="text" size="small" v-if="queueType === 'OUTER'"   @click="openUpdateLog(scope.row)" v-auth="23245">查看</el-button>
            <el-button type="text" size="small" v-if="queueType === 'LAWSUIT'" @click="openUpdateLog(scope.row)" v-auth="23265">查看</el-button>
            <el-button type="text" size="small" v-if="queueType === 'ROBOT'"   @click="openUpdateLog(scope.row)" v-auth="23254">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="队列日志"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" v-if="queueType === 'SELF'"    @click="openLog(scope.row)" v-auth="23236">查看</el-button>
            <el-button type="text" size="small" v-if="queueType === 'OUTER'"   @click="openLog(scope.row)" v-auth="23246">查看</el-button>
            <el-button type="text" size="small" v-if="queueType === 'LAWSUIT'" @click="openLog(scope.row)" v-auth="23266">查看</el-button>
            <el-button type="text" size="small" v-if="queueType === 'ROBOT'"   @click="openLog(scope.row)" v-auth="23255">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="queueRemark"
          label="注记"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        ></el-table-column>
      </template>
    </data-box>
    <!--新增队列弹出框-->
    <el-dialog
      :title="dialog.title1"
      :center="true"
      :visible.sync="dialog.add"
      width="990px"
      @open="$nextTick(() => $refs['add-queue'].reset())"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <add-zicui-queue
        v-if="['SELF', 'LAWSUIT', 'OUTER'].includes(queueType)"
        :queueType="queueType"
        :queueId="queueId"
        :readOnly="readOnly"
        :edit="edit"
        @close="dialog.add = false"
        @refreshList="refreshData"
        ref="add-queue"
      ></add-zicui-queue>
      <add-robot-queue
        v-if="queueType === 'ROBOT'"
        :queueId="queueId"
        :readOnly="readOnly"
        :edit="edit"
        @close="dialog.add = false"
        @refreshList="refreshData"
        ref="add-queue"
      ></add-robot-queue>
    </el-dialog>
    <!--队列案件设置经办弹出框-->
    <el-dialog
      :title="queueType !== 'OUTER' ? '经办设置' : '设置外包公司'"
      :center="true"
      :visible.sync="dialog.AddAgentDetail"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <add-agent-detail
        @close="dialog.AddAgentDetail = false"
        :showGuzhi="showGuzhi"
        :treeClose="queueType === 'OUTER'"
        :queueId="queueId"
        :queueType="queueType"
        @refreshList="refreshData"
        ref="add-agent-detail"
      ></add-agent-detail>
    </el-dialog>

    <!--队列案件池弹出框-->
    <el-dialog
      title="案件队列池"
      :center="true"
      :visible.sync="dialog.openPool"
      width="990px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <queue-pool
        :queueCode="queueCode"
        :queueType="queueType"
        @close="dialog.openPool = false"
        @refreshList="refreshData"
        ref="queue-pool"
      ></queue-pool>
    </el-dialog>
    <!--队列修改记录弹出框-->
    <el-dialog
      title="队列修改记录"
      :center="true"
      :visible.sync="dialog.openUpdateLog"
      width="990px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <queue-modify-log
        :queueId="queueId"
        :queueType="queueType"
        :pithyFlag="pithyFlag"
        @openDetail="
          queueId => {
            showOrEditQueue(queueId, true, false);
          }
        "
        @close="dialog.openUpdateLog = false"
        @refreshList="refreshData"
        ref="queue-update-log"
      ></queue-modify-log>
    </el-dialog>
    <!--队列案件日志弹出框-->
    <el-dialog
      title="队列日志"
      :center="true"
      :visible.sync="dialog.openLog"
      width="990px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <queue-log
        :queueId="queueId"
        @close="dialog.openLog = false"
        @refreshList="refreshData"
        ref="queue-log"
      ></queue-log>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Layout, Dependencies, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";

import { QueueService } from "~/services/domain-service/queue-manage.service";
import { QueueLogService } from "~/services/domain-service/queue-log.service";
import AddZicuiQueue from "~/components/queue-manage/add-zicui-queue.vue";
import AddRobotQueue from "~/components/queue-manage/add-robot-queue.vue";
import AddPithyQueue from "~/components/queue-manage/add-pithy-queue.vue";
import QueuePool from "~/components/queue-manage/queue-pool.vue";
import QueueModifyLog from "~/components/queue-manage/queue-modify-log.vue";
import QueueLog from "~/components/queue-manage/queue-log.vue";
import AddAgentDetail from "~/components/queue-manage/add-agent-detail.vue";
import { DepartmentService } from "~/services/management-service/department.service";
import { Prop } from "vue-property-decorator";

// @Auth(2323)
@Layout("workspace")
@Component({
  components: {
    AddZicuiQueue,
    AddRobotQueue,
    AddPithyQueue,
    AddAgentDetail,
    QueuePool,
    QueueModifyLog,
    QueueLog
  }
})
export default class QueueList extends Vue {
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(QueueService) private queueService: QueueService;
  @Dependencies(QueueLogService) private queueLogService: QueueLogService;
  @Dependencies(DepartmentService) private departmentService: DepartmentService;
  @Prop() private queueType;
  private queueCode: string = "";
  private queueId = "";
  private readOnly = false;
  private edit = false;
  private showGuzhi = true;
  private pithyFlag = false;
  private queryModel: any = {
    queueName: "",
    queueCode: "",
    queueCategory: "",
    status: "",
    changeHandType: "",
    updateName: "",
    reviewer: "",
    agentName: ""
  };
  private rules: any = {
    queueCode: [
      { required: false, message: '请输入队列代码', trigger: 'blur' },
      { pattern: /^[A-Za-z0-9]+$/, message: "请输入英文字母或数字", trigger: "blur" }
    ],
  };
  private queueDataSet: any[] = [];
  private dialog: any = {
    add: false,
    // addAgent: false,
    AddAgentDetail: false,
    openPool: false,
    openUpdateLog: false,
    openLog: false,
    title1: ""
  };
  private mounted() {
    this.queryModel.queueCategory = this.queueType;
    this.refreshData();
  }
  private refreshData() {
    this.queueService
      .getAllCaseQueue(this.queryModel, this.pageService, {})
      .subscribe(data => {
        this.queueDataSet = data;
        data.map(item => {
          item.updateTime = item.timeModified; // 修改时间
        });
      });
  }
  //打开新增队列弹框
  private addQueue() {
    this.queueId = "";
    this.readOnly = false;
    this.edit = false;
    this.dialog.add = true;
    this.dialog.title1 = "新增队列";
  }

  //查看队列详情,编辑队列
  private showOrEditQueue(queueId, readOnly, edit) {
    this.queueId = queueId;
    this.pithyFlag = false;
    this.readOnly = readOnly;
    this.edit = edit;
    this.dialog.add = true;
    this.dialog.title1 = edit ? "编辑队列" : "查看队列";
    this.$nextTick(() => {
      const addQueue: any = this.$refs["add-queue"];
      addQueue.queueIdChange(this.queueId); // 队列修改记录 - 详情查看
    });
  }
  //停用队列
  private disableQueue(row) {
    this.$confirm(
      `您确定要${row.status === "ON" ? "停用" : "启用"}该队列吗？`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    ).then(() => {
      this.queueService.updateStatus({ id: row.id }).subscribe(
        data => {
          this.$message.success(`${row.status === "ON" ? "停用" : "启用"}成功`);
          this.refreshData();
        },
        ({ msg }) => {}
      );
    });
  }
  //打开经办设置弹框
  private setAgent(row) {
    this.queueId = row.id;
    this.showGuzhi = row.distributionMode === "FIXED_RATIO";
    this.dialog.AddAgentDetail = true;
    this.$nextTick(() => {
      const AddAgentDetail: any = this.$refs["add-agent-detail"];
      AddAgentDetail.currentNode = null;

      AddAgentDetail.getAgentData();
      // 历史注记
      AddAgentDetail.queryHistory(this.queueId);
      AddAgentDetail.numberValidateForm.remark = "";

      // 获取tree机构
      AddAgentDetail.getAllDepartmentData();
    });
  }

  //打开队列案件池弹框
  private openPool(row) {
    this.dialog.openPool = true;
    this.queueCode = row.queueCode;
    this.$nextTick(() => {
      const queuePool: any = this.$refs["queue-pool"];
      queuePool.reset();
    });
  }
  //打开队列修改记录弹框
  private openUpdateLog(row) {
    this.dialog.openUpdateLog = true;
    this.queueId = row.id;
    this.pithyFlag = false;
    this.$nextTick(() => {
      const queueUpdateLog: any = this.$refs["queue-update-log"];
      queueUpdateLog.reset();
    });
  }
  //打开队列日志弹框
  private openLog(row) {
    this.dialog.openLog = true;
    this.queueId = row.id;
    this.$nextTick(() => {
      const queueLog: any = this.$refs["queue-log"];
      queueLog.reset();
    });
  }
}
</script>

<style lang="less"></style>
